<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>批量导入员工</span>
      </div>
      <!-- 导出excel的组件 -->
      <UploadExcel :before-upload="beforeUpload" :on-success="onSuccess" />
    </el-card>
  </div>
</template>

<script>
/**
 * 1. 导入组件支持两个关键的props传入

  before-upload：导入之前做校验  可以校验excel文件体积和格式
  on-success：插件已经把excel表格转换成了有用的数据 表头数据和表格数据   （ {results, header} ）

  2. excel导入插件本质：把excel经过分析转换成js能够识别的常规数据，拿到数据我们可以进行任何操作

  3. 表格数据格式为`对象数组`    表头数据格式为由excel表头组成的`新数组`
 */
// 导入excel批量添加员工的api
import { importEmployees } from '@/api/employees'
// 时间格式转换
import { formatExcelDate } from '@/utils/index'
export default {
  methods: {
    beforeUpload (file) {
      // console.log('文件信息: ', file)
      return true
    },
    async onSuccess ({ header, results }) {
      // console.log('表头: ', header)
      console.log('数据: ', results)
      /**
       * 1. 接口字段的key需要从中文转成英文
       * 2. 涉及到时间的字段需要进行严格的时间格式化处理
       * 3. 手机号要求不能出现重复（后端校验）
       */
      await importEmployees(this.transformData(results))
      this.$router.back()
    },
    transformData (results) {
      // 1.映射表
      const userMap = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 2.根据映射关系遍历results数据，替换所有人员信息的中文key
      // 准备一个新数组 =》存储转换完的结果
      // 准备一个新对象 ==> 存储转换成英文属性的员工信息
      // key 中文属性 ==> 转成英文属性
      // 判断是事件类型的进行转换
      const newResults = []
      results.forEach(item => {
        // item 就是一条员工信息(对象类型)
        const newItem = {}
        for (const key in item) {
          // key 就是中文的属性(需要转换的中文)
          // console.log('key', key)
          // 根据映射表和中文的属性名, 得出对应的英文值enKey
          const enKey = userMap[key]
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            newItem[enKey] = formatExcelDate(item[key], '-')
          } else {
            // console.log('item[key]', item[key])
            // item[key]是item的属性值
            // 英文的key, 员工信息的value值 组成了新的item(员工信息)
            newItem[enKey] = item[key]
          }
        }
        newResults.push(newItem)
      })
      return newResults
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
